<template>
    <ul class="ant-transfer-list-content">
      <div v-for="item in itemList" :key="item.key" class="LazyLoad is-visible">
        <li :title="item.title" class="ant-transfer-list-content-item">
          <label class="ant-checkbox-wrapper">
            <a-checkbox-group>
              <a-checkbox :value="item.key" :name="item.title" :checked=true @change="itemChanged"></a-checkbox>
            </a-checkbox-group>
          </label><span class="ant-transfer-list-content-item-text">{{ item.title }}</span>
          <a-icon class="item-operator" type="delete" @click.stop="removeItem(item)"/>
          <a-icon class="item-operator" type="arrow-down" @click.stop="moveDown(item)"/>
          <a-icon class="item-operator" type="arrow-up" @click.stop="moveUp(item)"/>
        </li>
      </div>
    </ul>
</template>

<script>

export default {
    name: 'FeatureItem',
    props: ['itemList'],
    data () {
      return {
        selected: []
      }
    },
    mounted () {
    },
    methods: {
      itemChanged: function (e) {
        const item = {
          checked: e.target.checked,
          key: e.target.value
        }

        this.$emit('onSelect', item)
      },
      moveUp: function (item) {
        this.$emit('onMoveUp', item)
      },
      moveDown: function (item) {
        this.$emit('onMoveDown', item)
      },
      removeItem: function (item) {
        this.$emit('onDeleteItem', item)
      }
    }
  }
</script>
<style>
.ant-transfer-list-content-item-text{
  color: #f00;
}

.ant-transfer-list-body-customize-wrapper{
  width: 100%;
  padding: 0;
}

.item-operator{
  float: right;
  padding-right: 0.5em;
}
</style>
